<template>
    <div>
        <fieldset>
            <legend>state:</legend>
            <div>{{ state }}</div>
        </fieldset>
        <fieldset>
            <legend>name(toRef(state,"name"))</legend>
            <div>{{ name }}</div>
        </fieldset>
        <fieldset>
            <legend>age(ref(state.age)，不会因原数据改变而改变)</legend>
            <div>{{ age }}</div>
        </fieldset>
        <van-button @click="change">改变state的name和age</van-button>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRef } from "vue";

export default defineComponent({
    setup() {
        const state = reactive({ name: "zs", age: 18 });
        const name = toRef(state, "name");
        const age = ref(state.age);
        const change = () => {
            state.name += "==";
            state.age += 1;
        };
        return {
            state,
            name,
            age,
            change,
        };
    },
});
</script>

<style scoped></style>
